<template>
  <div class="whole">
    <div class="search_box">
      <div class="search_input">
        <el-input
          placeholder="请输入需要检索的文献信息..."
          v-model="searchkeywords"
        >
          <el-select
            v-model="select"
            slot="prepend"
            placeholder="检索类别"
            style="width: 120px"
          >
            <el-option
              v-for="item in advance_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button
          ><el-divider
            direction="vertical"
            slot="append"
            style="padding: 0 15px"
          ></el-divider
          ><el-button slot="append" @click="search_in_result"
            >结果中检索</el-button
          ><el-divider
            direction="vertical"
            slot="append"
            style="padding: 0 15px"
          ></el-divider
          ><el-button slot="append" @click="advance"
            >高级检索</el-button
          ></el-input
        >
      </div>
    </div>
    <div class="advance_search" v-if="is_advance">
      <div class="advance_item">
        <el-input v-model="advance_search_1"
          ><el-select
            v-model="advance_search_select1"
            slot="prepend"
            style="width: 100px"
          >
            <el-option
              v-for="item in advance_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option> </el-select
          ><el-select
            v-model="advance_logic_1"
            slot="append"
            style="width: 80px"
          >
            <el-option
              v-for="item in advance_logic"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option> </el-select
        ></el-input>
      </div>
      <div class="advance_item">
        <el-input v-model="advance_search_2"
          ><el-select
            v-model="advance_search_select2"
            slot="prepend"
            style="width: 100px"
          >
            <el-option
              v-for="item in advance_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option> </el-select
          ><el-select
            v-model="advance_logic_2"
            slot="append"
            style="width: 80px"
          >
            <el-option
              v-for="item in advance_logic"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option> </el-select
        ></el-input>
      </div>
      <div class="advance_item">
        <el-input v-model="advance_search_3"
          ><el-select
            v-model="advance_search_select3"
            slot="prepend"
            style="width: 100px"
          >
            <el-option
              v-for="item in advance_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option> </el-select
        ></el-input>
      </div>
      <div class="advance_item">
        <el-date-picker
          v-model="date_range"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </div>
      <div class="advance_item">
        <el-button @click="reset">重置选项</el-button>
        <el-button @click="advance_search" type="primary" style="width: 200px">
          检 索
        </el-button>
        <el-button @click="advance_search_in_result">结果中检索</el-button>
      </div>
    </div>
    <div class="search_set">
      排序:
      <div
        @click="set_order(1)"
        class="order"
        :class="order == 1 || order == 4 ? 'order_choose' : 'order'"
      >
        时间<span :class="order == 1 || order == 4 ? 'show' : 'visible'"
          ><i :class="order == 4 ? 'el-icon-sort-up' : 'el-icon-sort-down'"></i
        ></span>
      </div>
      <div
        @click="set_order(2)"
        class="order"
        :class="order == 2 || order == 5 ? 'order_choose' : 'order'"
      >
        下载量<span :class="order == 2 || order == 5 ? 'show' : 'visible'"
          ><i :class="order == 5 ? 'el-icon-sort-up' : 'el-icon-sort-down'"></i
        ></span>
      </div>
      <div
        @click="set_order(3)"
        class="order"
        :class="order == 3 || order == 6 ? 'order_choose' : 'order'"
      >
        引用量
        <span :class="order == 3 || order == 6 ? 'show' : 'visible'"
          ><i :class="order == 6 ? 'el-icon-sort-up' : 'el-icon-sort-down'"></i
        ></span>
      </div>
    </div>
    <div class="search_list">
      <div v-for="item in page_show" :key="item.id" class="list_card">
        <div>
          <span class="title" @click="information(item.id)">{{
            item.title
          }}</span>
        </div>
        <div>
          <span
            class="author"
            v-for="(author, index) in item.authors"
            :key="index"
            v-if="index < 3"
          >
            {{ author }} </span
          ><span class="date">{{ item.date }}</span>
        </div>
        <div class="abstract">摘要：{{ item.abstract }}</div>
        <div>
          <span
            class="keywords"
            v-for="(keyword, index) in item.keywords"
            :key="index"
            v-if="index < 5"
          >
            {{ keyword }}
          </span>
        </div>
        <div style="margin: 10px 0">
          <div class="button" @click="information(item.id)">
            <i class="el-icon-reading"></i>查看详情
          </div>
          <div class="button" @click="collect(item.id)">
            <i class="el-icon-folder-add"></i>加入收藏
          </div>
          <div class="card_foot">
            <span style="margin-right: 10px">被引:{{ item.cited }}</span
            ><span>下载:{{ item.download }}</span>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 10px; border-top: 1px dashed #ccc"></div>
    <div style="text-align: center; padding: 20px 0">
      <el-pagination
        background
        layout="prev, pager, next,sizes"
        :current-page.sync="current_page"
        :page-size.sync="page_size"
        :page-sizes="[5, 10, 20, 40]"
        :total="search_result.length"
        @current-change="change_page"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      last_search: {}, //上一次普通检索记录
      last_advanceSearch: {}, //上一次高级检索记录
      //普通检索
      searchkeywords: "", //检索关键字
      select: "", //检索类别
      order: 1, //排序选项
      is_advance: false,
      current_page: 1, //当前页数
      page_size: 10, //一页条数
      //高级检索
      advance_search_1: "", //检索关键字
      advance_search_2: "",
      advance_search_3: "",
      advance_search_select1: "", //检索类别
      advance_search_select2: "",
      advance_search_select3: "",
      advance_logic_1: "", //逻辑链接
      advance_logic_2: "",
      date_range: "", //检索的时间范围
      advance_options: [
        //高级检索分类
        { value: "选项1", label: "关键词" },
        { value: "选项2", label: "篇名" },
        { value: "选项3", label: "作者" },
        { value: "xul", label: "学科领域" },
        { value: "选项4", label: "单位" },
        { value: "选项5", label: "摘要" },
        { value: "选项6", label: "分类号" },
        { value: "选项7", label: "DOI" },
      ],
      advance_logic: [
        //高级检索逻辑
        { label: "AND", value: "1" },
        { label: "OR", value: "2" },
        { label: "NOT", value: "3" },
      ],
      pickerOptions: {
        //高级检索快捷时间
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      total_result: 1000,
      // page_show: [], //当前显示的条目
      search_result: [
        {
          id: 123456,
          title: "文献是十三订饭三分",
          authors: ["作者1", "作者2", "作者3", "作者4"],
          abstract:
            "值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。",
          date: "2021-11-20",
          keywords: [
            "关键词1",
            "关键词2",
            "关键词3",
            "关键词4",
            "关键词5",
            "关键词6",
          ],
          cited: 54,
          download: 100,
        },
        {
          id: 123457,
          title: "文献是",
          authors: ["作者1", "作者2", "作者3", "作者4"],
          abstract:
            "值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。",
          date: "2021-11-20",
          keywords: [
            "关键词1",
            "关键词2",
            "关键词3",
            "关键词4",
            "关键词5",
            "关键词6",
          ],
          cited: 545,
          download: 102,
        },
        {
          id: 123458,
          title: "文献是",
          authors: ["作者1", "作者2", "作者3", "作者4"],
          abstract:
            "值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。",
          date: "2021-11-20",
          keywords: [
            "关键词1",
            "关键词2",
            "关键词3",
            "关键词4",
            "关键词5",
            "关键词6",
          ],
          cited: 54,
          download: 100,
        },
        {
          id: 1234112,
          title: "文献是十三订饭三分",
          authors: ["作者1", "作者2", "作者3", "作者4"],
          abstract:
            "值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。",
          date: "2021-11-20",
          keywords: [
            "关键词1",
            "关键词2",
            "关键词3",
            "关键词4",
            "关键词5",
            "关键词6",
          ],
          cited: 54,
          download: 100,
        },
        {
          id: 12348787,
          title: "文献是十三订饭三分",
          authors: ["作者1", "作者2", "作者3", "作者4"],
          abstract:
            "值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。",
          date: "2021-11-20",
          keywords: [
            "关键词1",
            "关键词2",
            "关键词3",
            "关键词4",
            "关键词5",
            "关键词6",
          ],
          cited: 54,
          download: 100,
        },
        {
          id: 124456,
          title: "文献是十三订饭三分",
          authors: ["作者1", "作者2", "作者3", "作者4"],
          abstract:
            "值得注意的是，两个project是独立的，即使你没有完成第一个project，对第二个project的测试也不会产生什么影响。还有一些内容在官方pintos guide中都有提到，建议在开始着手修改代码前，通读一遍上文提到的官网教程。",
          date: "2021-11-20",
          keywords: [
            "关键词1",
            "关键词2",
            "关键词3",
            "关键词4",
            "关键词5",
            "关键词6",
          ],
          cited: 54,
          download: 100,
        },
      ],
    };
  },
  mounted() {
    var keyword = this.$store.state.search.keyword;
    var advance = this.$store.state.search.isAdvance;
    var option = this.$store.state.search.option;
    if (advance) {
      this.is_advance = true;
    } else {
      this.searchkeywords = keyword;
      this.select = option;
      this.search();
    }
  },
  methods: {
    search() {}, //搜索
    search_in_result() {}, //在结果中搜索
    advance_search() {}, //高级搜索
    advance_search_in_result() {}, //高级搜索在结果中
    advance() {
      //高级搜索切换
      if (this.is_advance) this.is_advance = false;
      else this.is_advance = true;
    },
    set_order(type) {
      //排序
      // console.log(type);
      if (this.order === type) {
        this.order = type + 3;
      } else this.order = type;
      //>>>>>>>>>>>>>>>
      //需要重新获取
    },
    information(id) {
      //查看详情
      // this.$router.push("Information/" + id);
      const { href } = this.$router.resolve("/Information/" + id);
      window.open(href, "_blank");
      console.log("查看详情" + id);
    },
    collect(id) {
      //添加收藏
      console.log("收藏" + id);
    },
    change_page(cur_page) {
      console.log(cur_page);
    },
    reset() {
      //重置
      this.advance_search_1 = "";
      this.advance_search_2 = "";
      this.advance_search_3 = "";
      this.advance_search_select1 = "";
      this.advance_search_select2 = "";
      this.advance_search_select3 = "";
      this.advance_logic_1 = "";
      this.advance_logic_2 = "";
      this.date_range = "";
    },
  },
  computed: {
    page_show() {
      return this.search_result.slice(
        this.page_size * (this.current_page - 1),
        this.page_size * this.current_page
      );
    },
  },
};
</script>

<style lang="less" scoped>
.whole {
  width: 65%;
  height: 100%;
  margin: 0 auto;
  background-color: #ffffff;
  font-family: "Microsoft YaHei";
  min-width: 700px;
  box-shadow: 0 0 6px rgba(207, 216, 221, 0.63),
    0 4px 6px rgba(207, 216, 221, 0.63);
}
.search_box {
  // background-color: blue;
  height: 60px;
  width: 80%;
  margin: 0px auto;
  padding-top: 25px;
}
/deep/.el-divider--vertical {
  height: 2em;
  margin: 0 18px;
}
.advance_search {
  margin: 15px auto;
  width: 87%;
}
.advance_item {
  margin: 10px auto;
  text-align: center;
}
.search_list {
  margin-top: 40px;
  min-height: 450px;
}
.search_set {
  font-size: 17px;
  margin: 15px 0;
  text-align: right;
}
.order {
  display: inline;
  margin: 0 5px;
  user-select: none;
}
.visible {
  visibility: hidden;
}
.show {
  visibility: unset;
}
.order_choose {
  color: #0f5de5;
}
.order:hover {
  color: #0f5de5;
  cursor: pointer;
}
.card_foot {
  float: right;
  font-size: 13px;
  color: #666666;
}
.list_card {
  padding: 10px 35px;
  border-top: 1px dashed #ccc;
  // border-right: 1px solid #ccc;
  // border-left: 1px solid #ccc;
}
.title {
  display: inline-block;
  padding: 7px 0;
  font-size: 20px;
  font-family: "Microsoft YaHei";
  font-weight: bold;
  color: #215db1;
  user-select: none;
}
.title:hover {
  color: #ff6c00;
  cursor: pointer;
}
.author {
  font-size: 13px;
  color: #417dc9;
  display: inline-block;
  padding: 7px 7px;
  user-select: none;
}
.author:hover {
  color: #ff6c00;
  cursor: pointer;
}
.date {
  float: right;
  margin-right: 100px;
  font-size: 13px;
  user-select: none;
  color: #666666;
}
.abstract {
  font-size: 12px;
  color: #666666;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.keywords:hover {
  cursor: pointer;
  color: #ff6c00;
}
.keywords {
  font-size: 13px;
  color: #417dc9;
  display: inline-block;
  padding: 7px 5px;
  text-decoration: underline;
}
.button {
  font-size: 14px;
  color: #417dc9;
  display: inline-block;
  padding: 4px 10px;
  margin-right: 15px;
  border-radius: 5px;
  border: 1px solid #417dc9;
  user-select: none;
}
.button:hover {
  background-color: #417dc9;
  color: white;
  cursor: pointer;
}
/deep/.el-icon-reading {
  padding-right: 4px;
}
/deep/.el-icon-folder-add {
  padding-right: 4px;
}
</style>